<template>
  <page-body>
    <view class="page">
      <view class="flex align-stretch justify-between benben-position-layout flex home_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex align-center justify-between flex-sub home_fd0_0'>
          <!--   <view class='flex align-center flex-sub' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/tabBar/home/chooseCitye`"> -->
          <view class='flex align-center flex-sub' @tap.stop="getAdd" data-type="navigateTo"
            :data-url="`/pages/tabBar/home/chooseCitye`">
            <image class='home_fd0_0_c0_c0' mode=" aspectFit" :src='STATIC_URL+"48.png"'>
            </image>
            <view class='text-cut  ' style="width:200rpx;">
              {{cityname|| '请选择'}}
              <!-- <image class='' @click.stop="clearAddress" style="width: 32rpx;height: 32rpx;margin-left: 8rpx;"
                mode="aspectFit" :src=' STATIC_URL+"133.png"'></image> -->
            </view>

          </view>
          <view class='flex flex-wrap align-center flex-sub'>
            <text class='home_fd0_0_c1_c0'>首页</text>
          </view>
          <view class='flex align-center '>
            <view class='flex flex-wrap align-center justify-center home_fd0_0_c2_c0'>
            </view>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
        <!--   lat: this.lat,
          lng: this.lng, -->
        <view class='flex flex-wrap align-center justify-between home_fd1_0' @tap.stop="handleJumpDiy"
          data-type="navigateTo"
          :data-url="`/pages/homePage/propertyList/propertyList?cityname${cityname}&lat=${lat}&lng=${lng}`">
          <view class='flex flex-wrap align-center'>
            <image class='home_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"162.png"'></image>
            <text class='home_fd1_0_c0_c1'>搜索想找的房间</text>
          </view>
          <view class='flex flex-wrap align-center justify-center home_fd1_0_c1'>
            <text>搜索</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-center justify-around benben-flex-layout home_flex_2">
        <view class='flex flex-wrap align-stretch justify-center home_fd2_0' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/homePage/propertyList/propertyList?rental_method=1`">
          <text class='home_fd2_0_c0'>合租</text>
        </view>
        <view class='flex flex-wrap align-stretch justify-center home_fd2_1' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/homePage/propertyList/propertyList?rental_method=2`">
          <text class='home_fd2_0_c0'>整租</text>
        </view>
        <view class='flex flex-wrap align-stretch justify-center home_fd2_2' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/homePage/propertyList/propertyList?rental_method=3`">
          <text class='home_fd2_0_c0'>短租</text>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---首页房源列表flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout home_flex_3">
        <view class='flex flex-wrap align-stretch home_fd3_0' @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/homePage/propertydetails/propertydetails?aid=${item.aid}`" v-for="(item,index) in dataList"
          :key="index">
          <view class='flex flex-wrap align-start home_fd3_0_c0'>
            <text class='home_fd3_0_c0_c0'>{{item.rental_method_name }}</text>
            <image class='home_fd3_0_c0_c1' mode="aspectFill" :src='item.images[0]'></image>
          </view>
          <view class='flex flex-direction flex-wrap align-stretch flex-sub home_fd3_0_c1'>
            <view class='flex flex-wrap align-center'>
              <view class='text-cut-2 home_fd3_0_c1_c0_c0'>{{item.title}}</view>
            </view>
            <view class='flex flex-wrap align-center home_fd3_0_c1_c1' v-if="item.location_name">
              <image class='home_fd3_0_c1_c1_c0' mode="aspectFit" :src='STATIC_URL+"156.png"'></image>
              <text class='home_fd3_0_c1_c1_c1'>{{item.location_name}}</text>
            </view>
            <view class='flex flex-wrap align-center'>
              <text class='home_fd3_0_c1_c2_c0' v-if="item.house_type_name">{{item.house_type_name}}</text>
              <text class='home_fd3_0_c1_c2_c0' v-if="item.house_towards_name">{{item.house_towards_name}}</text>
              <text class='home_fd3_0_c1_c2_c0' v-if="item.total_floor_name">{{item.total_floor_name}}</text>
              <text class='home_fd3_0_c1_c2_c0' v-if="item.area">{{item.area}}㎡</text>
            </view>
            <view class='flex flex-wrap align-center home_fd3_0_c1_c3'>
              <text class='home_fd3_0_c1_c3_c0'>{{item.rent}}</text>
              <text class='home_fd3_0_c1_c3_c1'>元/月</text>
            </view>
          </view>
        </view>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>

      <!---首页房源列表flex布局结束-->


    </view>
    <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1719971171261" :label.sync='city'
      :province.sync='address_province' :city.sync='address_city' :area.sync='address_district' mode='region'
      :mask-show='true' :picker-height='88' :hide-area='false' @change="getListFunc()">
      <template #picker-header>
        <view class='flex flex-wrap align-center justify-between Publishlistings_picker2_0'>
          <text @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
          <text>选择地址</text>
          <text class='Publishlistings_picker2_0_c2'
            @click.stop="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确认</text>
        </view>
      </template>
    </benben-picker>

    <app-update ref="update" :auto="true"></app-update>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  import pagingList from '@/common/mixin/paging_list.js';
  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "dataList": [],
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,

        pickerDiy1719971171261: false,
        address_province: '',
        addressSelect: '',
        address_district: '',
        address_city: '',
        city: '',
        areacity: '',

        cityinfo: null,
        cityname: '',
        citycode: '',
        region_code: '',
        lat: '',
        lng: '',
        timer: '',

      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      let that = this
      that.timer = setInterval(res => {
        if (uni.getStorageSync('cityinfo')) {
          that.cityinfo = JSON.parse(uni.getStorageSync('cityinfo'))
          that.lat = that.cityinfo.lat
          that.lng = that.cityinfo.lng
          that.cityname = that.cityinfo.text
          that.citycode = that.cityinfo.code
          that.region_code = that.cityinfo.code
          console.log('that.citycode', that.region_code)
          that.getListFunc()
        } else {
          that.getLocation()
        }
      }, 500)
      // this.getListFunc()
    },
    onUnload() {

    },
    onReady() {
      // #ifdef APP
      this.$util.debounce(
        () => {
          this.$refs.update.checkAppUpdate()
        },
        1000,
        true
      )
      // #endif

    },
    onShow() {


      // console.log('2222', uni.getStorageSync('cityAddress'))
      // if (uni.getStorageSync('cityAddress')) {
      //   this.city = uni.getStorageSync('cityAddress')
      //   this.getListFunc()
      // }
    },
    onHide() {
      uni.setStorageSync('cityAddress', this.city)
    },
    onResize() {

    },
    onPullDownRefresh() {
      this.getListFunc()
    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      /**
       * @func 地图选点
       */

      getAdd() {
        let _this = this
        console.log('info4566')
        uni.chooseLocation({
          success: (resule) => {
            console.log(resule, '地图');
            _this.lng = resule.longitude
            _this.lat = resule.latitude
            _this.cityname = resule.name
            let cityall = {
              lat: _this.lat,
              lng: _this.lng,
              text: _this.cityname,
            }
            console.log('lllllll', cityall)
            uni.setStorageSync('cityinfo', JSON.stringify(cityall))
            _this.getListFunc()
            // _this.myAmapFun.getRegeo({
            //   location: resule.longitude + ',' + resule.latitude,
            //   success: (data) => {
            //     //成功回调
            //     let regeoData = data[0].regeocodeData.addressComponent;
            //     _this.location_city = regeoData.city.length ? regeoData.city : '';
            //     _this.location_province = regeoData.province;
            //     _this.location_district = regeoData.district;
            //     console.log(_this.location_province, '回调');

            //   },
            //   fail: (info) => {
            //     //失败回调
            //     console.log('info', info)
            //   },
            //   complete: (complete) => {
            //     console.log('2222', complete)
            //   }
            // })
          },
          fail: (info) => {
            //失败回调
            console.log('info11', info)
          },
          complete: (complete) => {
            console.log('2222', complete)
          }
        })
      },
      getLocation() {
        let that = this
        // #ifdef APP
        uni.getLocation({
          type: 'gcj02',
          geocode: true,
          success: (res) => {
            that.lat = res.latitude;
            that.lng = res.longitude;
            that.cityname = res.address.city;
            let cityall = {
              lat: that.lat,
              lng: that.lng,
              text: that.cityname,
            }
            console.log('lllllll', cityall)
            uni.setStorageSync('cityinfo', JSON.stringify(cityall))
            that.getListFunc()
            return;
          },
          complete: (complete) => {
            console.log('complete', complete)
          }
        })
        // #endif
        // #ifdef H5
        that.getListFunc()
        // #endif

      },
      clearAddress() {
        this.city = ''
        uni.setStorageSync('cityAddress', '')
        this.getListFunc()
      },
      chooseCity() {
        // this.$refs.benbenWritePickerCodepicker2.pickerConfirm()
        console.log('e从的萨芬萨')
        console.log('ppp22222', this.areacity)
        this.getListFunc()
      },
      getListFunc() {
        let that = this
        let objsss = {
          city: this.cityname,
          lat: this.lat,
          lng: this.lng,
        }

        clearInterval(that.timer);
        this.minixPagingListsApi = global.apiUrls.post666acf7ef2728;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          city: this.cityname,
          lat: this.lat,
          lng: this.lng,
        }
        this.listData = [];
        uni.stopPullDownRefresh()
        this.dataList = this.listData;
        this.pagingListToggle();
      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      },
    }
  };
</script>
<style lang="scss" scoped>
  .Publishlistings_picker2_0_c2 {
    color: rgba(255, 111, 2, 1);
  }

  .Publishlistings_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('154.png')) no-repeat;
    background-size: 100% auto;
  }

  .home_flex_0 {
    background: url(image-path('154.png')) no-repeat;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .home_fd0_0_c2_c0 {
    width: 50rpx;
    height: 50rpx;
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .home_fd0_0_c1_c0 {
    font-size: 36rpx;
    color: rgba(16, 16, 16, 1);
    font-weight: 600;
  }

  .home_fd0_0_c0_c1 {
    font-size: 32rpx;
  }

  .home_fd0_0_c0_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
  }

  .home_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    color: #333;
  }

  .home_fd1_0_c1 {
    background: #FF6F02;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    width: 116rpx;
    height: 64rpx;
    line-height: 64rpx;
    color: var(--benbenFontColor3);
  }

  .home_fd1_0_c0_c1 {
    margin: 0rpx 0rpx 0rpx 16rpx;
    color: var(--benbenFontColor2);
  }

  .home_fd1_0_c0_c0 {
    width: 32rpx;
    height: 32rpx;
  }

  .home_fd1_0 {
    border: 1px solid #FF6F02;
    background: #FFFFFF;
    width: 690rpx;
    height: 72rpx;
    margin: 24rpx auto 24rpx auto;
    border-radius: 44rpx;
    padding: 0rpx 8rpx 0rpx 24rpx;
  }

  .home_flex_2 {
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .home_fd2_2 {
    background: url(image-path('60.png')) no-repeat;
    background-size: 100% 100%;
    width: 216rpx;
    height: 180rpx;
    color: var(--benbenFontColor3);
  }

  .home_fd2_1 {
    background: url(image-path('59.png')) no-repeat;
    background-size: 100% 100%;
    width: 216rpx;
    height: 180rpx;
    color: var(--benbenFontColor3);
  }

  .home_fd2_0_c0 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .home_fd2_0 {
    background: url(image-path('58.png')) no-repeat;
    background-size: 100% 100%;
    width: 216rpx;
    height: 180rpx;
    color: var(--benbenFontColor3);
  }

  .home_flex_3 {
    background: var(--benbenbgColor1);
    padding: 24rpx 24rpx 0rpx 24rpx;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    background-size: 100% 100%;
    height: 100vh;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .home_fd3_0_c1_c3_c1 {
    font-size: 22rpx;
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .home_fd3_0_c1_c3_c0 {
    font-size: 36rpx;
  }

  .home_fd3_0_c1_c3 {
    color: rgba(251, 99, 80, 1);
    margin: 6rpx 0rpx 0rpx 0rpx;
  }

  .home_fd3_0_c1_c2_c0 {
    background: #F2F3F9;
    margin: 0rpx 12rpx 12rpx 0rpx;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    // width: 68rpx;
    padding: 0 8rpx;
    height: 40rpx;
    text-align: center;
    color: rgba(93, 114, 169, 1);
  }

  .home_fd3_0_c1_c1_c1 {
    font-size: 24rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 380rpx;
  }

  .home_fd3_0_c1_c1_c0 {
    width: 32rpx;
    height: 32rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
  }

  .home_fd3_0_c1_c1 {
    margin: 11rpx 0rpx 10rpx 0rpx;
  }

  .home_fd3_0_c1_c0_c0 {
    font-size: 32rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .home_fd3_0_c1 {
    width: 450rpx;
  }

  .home_fd3_0_c0_c1 {
    width: 240rpx;
    height: 200rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .home_fd3_0_c0_c0 {
    background: url(image-path('155.png')) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 9;
    top: 0rpx;
    left: 0rpx;
    font-size: 24rpx;
    color: var(--benbenFontColor3);
    padding: 4rpx 10rpx 4rpx 10rpx;
  }

  .home_fd3_0_c0 {
    margin: 0rpx 24rpx 0rpx 0rpx;
    width: 240rpx;
    height: 200rpx;
    position: relative;
  }

  .home_fd3_0 {
    border-bottom: 1px solid #eee;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
    padding: 24rpx 0rpx 24rpx 0rpx;
  }
</style>
